<template>
  <div class="all">
     <div class="shezhi">
           <img :src="this.$store.state.userInfo.profile" alt="">
           <p>{{this.$store.state.userInfo.nickname}}</p>
     </div>
       <div class="shezhi-one" @click="editor">
           <p>昵称</p>
           <div >
              <p >编辑</p>
              <img src="../assets/Fill 1@2.88x.png" alt="">
           </div>
       </div>
       <div class="zhanghu">
         <p>账户安全</p>
       </div>
  <div class="bottom-all">
      <div class="shezhi-two" >
           <p>修改登录手机号</p>
           <div >
              <p @click="gogogo()">{{name}}</p>
              <img src="../assets/Fill 1@2.88x.png" alt="">
           </div>
       </div>
        <div class="wei">
      <div class="shezhi-two">
           <p>修改登录密码</p>
           <div>
              <img src="../assets/Fill 1@2.88x.png" alt="" @click="updonn">
           </div>
       </div>
        </div>
         <div class="wei">
             <div class="shezhi-two">
           <p>修改支付密码</p>
           <div>
              <img src="../assets/Fill 1@2.88x.png" alt="">
           </div>
            </div>
       </div>
       <div class="wei">
                      <div class="shezhi-two">
           <p>忘记支付密码</p>
           <div>
              <img src="../assets/Fill 1@2.88x.png" alt="">
           </div>
       </div>
       </div>
        <div class="wei">
             <div class="shezhi-two">
           <p>忘记支付密码</p>
           <div>
              <img src="../assets/Fill 1@2.88x.png" alt="">
           </div>
       </div>
       </div>
       </div>
          <div class="tuichu" @click="tuichu()">
               <p>退出登录</p>
          </div>
  </div>
</template>

<script>
import qs from 'qs'
export default {
  data(){
    return{
      name:""
    }
  },
  methods:{
    tuichu(){
       this.$store.commit('setToken',"")
      this.$router.push({path:"/Home"})
    },
    updonn(){
        this.$router.push({path:"/changepassword"})
    },
    gogogo(){
       this.$router.push({path:"/changephone"})
    },
    editor() {
        this.$router.push("/nickname")
    }, 
     getCallCenter() {
      this.$http
        .post(
          "https://web-gateway.newbeescm.com/b2b-app-web/getCallCenter",
          {},
          {
            headers: {
              token: this.$store.state.token,
              userId: this.$store.state.userInfo.id
            }
          }
        )
        .then(res => {
          console.log(res)
        })
        .catch(err => {
          console.log(err);
        })
    },   
      pohone(){
        let a
        let name = this.$store.state.userInfo.phone
          this.name = (name.slice(0,3)+"****"+name.slice(8) )
      },
      nanmeall(){
           {
      this.$http
        .post(
          "https://web-gateway.newbeescm.com/b2b-app-web/getCallCenter",{},
          {
            headers: {
              token: this.$store.state.token,
              userId: this.$store.state.userInfo.id
            }
          }
        )
        .then(res => {
          console.log("客服电话",res)
        })
        .catch(err => {
          console.log(err);
        })
    }
      }
  },
  mounted(){
   this.getCallCenter()
   this.pohone();
   this.nanmeall()
  }
}

</script>
<style lang="scss" scoped>
.tuichu{
  margin:auto;
    margin-top:22.3%; 
  width: 82.9%;
  height: 0.44rem;
  background: #DD3333;
  border-radius: 0.04rem;
  display: flex;
  align-items: center;
  justify-content: center;
  p{
    font-size: 0.18rem;
    color: #FFFFFF;
  }
}   
.wei{
  position: relative;
    width: 100%;
  height: 100%;
}
.wei::after{
  content: "";
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-bottom: 1px solid  #ccc;
  transform: scale(1,0.1);
}
.bottom-all{
  display: flex;
  flex-direction: column;
  .shezhi-two{
  background: #FFFFFF;
   font-size: 0.15rem;
  height: 0.44rem;
  //margin: 0.1rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  p{
    margin-left:0.14rem; 
    color: #666666;
    }
    div{
      display: flex;
      align-items: center;
    
      img{
        height: 0.15rem;
        transform: rotate(-180deg);
        margin: 0 0.14rem 0 0.15rem;
      }
    }
}

}
.all{
 // background: rgb(233, 229, 229);
  .zhanghu{
      background: #FFFFFF;
         color: #666666;
         margin-bottom: 0.01rem;
 p {  margin-left: 0.14rem;
      height: 0.36rem;
      line-height: 0.36rem;}
  }
}
.shezhi-one{
  background: #FFFFFF;
   font-size: 0.15rem;
  height: 0.44rem;
  margin: 0.1rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  p{
    margin-left:0.14rem; 
    color: #666666;
    }
    div{
      display: flex;
      align-items: center;
      p{
        color: #CCCCCC;
      }
      img{
        height: 0.15rem;
        transform: rotate(-180deg);
        margin: 0 0.14rem 0 0.15rem;
      }
    }
}
.shezhi{
  background: #FFFFFF;
  height: 0.9rem;
  display: flex;
  align-items: center;
  img{
    width: 0.68rem;
    height: 0.68rem;
    margin: 0 0.115rem 0 0.14rem;
    border-radius: 50%;
  }
  p{
    font-size: 0.16rem;
    color: #030303;
  }
}

</style>

